<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <title>新增申购单</title>
    <link rel="stylesheet" href="../css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../css/style.css"/>
</head>
<body>
<div class="container">
    <div class="header">
        <span><i class="icon-angle-left icon-large"></i></span>新增热菜申购单
        <a class="pull-right" href="xuanzegongyingshang.html">增加物料</a>
    </div>
    <!--20161027新增搜索功能-->
    <div class="search pa1 text-center">
        <i class="icon-search icon-2x text-66"></i>
        <input class="search-input" type="search" placeholder="输入物料名称或速查码"/>
    </div>
    <div class="search-content">
        <ul class="list-group">
            <li>
                大白菜
            </li>
            <li>
                绿装白菜
            </li>
            <li>
                中白菜
            </li>
            <li>
                白菜
            </li>
            <li>
                白菜
            </li>
            <li>
                白菜
            </li>
            <li>
                小白菜
            </li>
            <li>
                白菜
            </li>
        </ul>
    </div>
    <!--20161027新增搜索功能-->
    <div class="main" style="overflow-y: auto">
        <div class="item-header">大类名称1</div>
        <!-- 单据列表-->
        <table class="danju bg-white">
            <tr>
                <th></th>
                <th>物料名称</th>
                <th>规格</th>
                <th>数量</th>
                <th>单位</th>
                <th>条只数</th>
            </tr>
            <tr>
                <!-- input中无数据时默认样式为empty-->
                <td class="state empty" style="width:2%"></td>
                <td class="name text-left" style="width:38%">大白菜</td>
                <td style="width:10%">1*500ml</td>
                <td style="width:20%"><input type="number" onclick="this.select();" placeholder="输入" pattern="[0-9]"/>
                </td>
                <td style="width:10%">斤</td>
                <td style="width:20%"><input type="number" onclick="this.select();" placeholder="输入"/></td>
            </tr>
            <tr>
                <!-- input中e 数据时样式为full-->
                <td class="empty"></td>
                <td class="name text-left" style="width:38%">鲤鱼鲤鱼鲤鱼鲤鱼鲤</td>
                <td style="width:10%">1*500ml</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
                <td style="width:10%">斤</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
            </tr>
            <tr>
                <!-- input中e 数据时样式为full-->
                <td class="empty"></td>
                <td class="name text-left" style="width:38%">鲤鱼鲤鱼鲤鱼鲤鱼鲤</td>
                <td style="width:10%">1*500ml</td>
                <td style="width:20%"><input onclick="this.select();" type="text" placeholder="输入"/></td>
                <td style="width:10%">斤</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
            </tr>
            <tr>
                <!-- input中e 数据时样式为full-->
                <td class="empty"></td>
                <td class="name text-left" style="width:38%">鲤鱼鲤鱼鲤鱼鲤鱼鲤</td>
                <td style="width:10%">1*500ml</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
                <td style="width:10%">斤</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
            </tr>
            <tr>
                <!-- input中e 数据时样式为full-->
                <td class="empty"></td>
                <td class="name text-left" style="width:38%">鲤鱼鲤鱼鲤鱼鲤鱼鲤</td>
                <td style="width:10%">1*500ml</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
                <td style="width:10%">斤</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
            </tr>
            <tr>
                <!-- input中e 数据时样式为full-->
                <td class="empty"></td>
                <td class="name text-left" style="width:38%">鲤鱼鲤鱼鲤鱼鲤鱼鲤</td>
                <td style="width:10%">1*500ml</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
                <td style="width:10%">斤</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
            </tr>
            <!-- 增加物料带入的数据背景色与模板中的数据不一样-->
            <tr class="other">
                <td class="empty"></td>
                <td class="name text-left" style="width:38%">鲤鱼鲤鱼鲤鱼鲤鱼鲤</td>
                <td style="width:10%">1*500ml</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
                <td style="width:10%">斤</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
            </tr>
            <tr>
                <!-- input中e 数据时样式为full-->
                <td class="empty"></td>
                <td class="name text-left" style="width:38%">白菜</td>
                <td style="width:10%">1*500ml</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
                <td style="width:10%">斤</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
            </tr>
            <tr>
                <!-- input中e 数据时样式为full-->
                <td class="empty"></td>
                <td class="name text-left" style="width:38%">白菜</td>
                <td style="width:10%">1*500ml</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
                <td style="width:10%">斤</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
            </tr>
            <tr>
                <!-- input中e 数据时样式为full-->
                <td class="empty"></td>
                <td class="name text-left" style="width:38%">小白菜</td>
                <td style="width:10%">1*500ml</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
                <td style="width:10%">斤</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
            </tr>
            <tr>
                <!-- input中e 数据时样式为full-->
                <td class="empty"></td>
                <td class="name text-left" style="width:38%">小白菜</td>
                <td style="width:10%">1*500ml</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
                <td style="width:10%">斤</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
            </tr>
            <tr>
                <!-- input中e 数据时样式为full-->
                <td class="empty"></td>
                <td class="name text-left" style="width:38%">小白菜</td>
                <td style="width:10%">1*500ml</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
                <td style="width:10%">斤</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
            </tr>
            <tr>
                <!-- input中e 数据时样式为full-->
                <td class="empty"></td>
                <td class="name text-left" style="width:38%">小白菜</td>
                <td style="width:10%">1*500ml</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
                <td style="width:10%">斤</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
            </tr>
            <tr>
                <!-- input中e 数据时样式为full-->
                <td class="empty"></td>
                <td class="name text-left" style="width:38%">小白菜</td>
                <td style="width:10%">1*500ml</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
                <td style="width:10%">斤</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
            </tr>
            <tr>
                <!-- input中e 数据时样式为full-->
                <td class="empty"></td>
                <td class="name text-left" style="width:38%">小白菜</td>
                <td style="width:10%">1*500ml</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
                <td style="width:10%">斤</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
            </tr>
            <tr>
                <!-- input中e 数据时样式为full-->
                <td class="empty"></td>
                <td class="name text-left" style="width:38%">绿装白菜</td>
                <td style="width:10%">1*500ml</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
                <td style="width:10%">斤</td>
                <td style="width:20%"><input onclick="this.select();" type="number" placeholder="输入"/></td>
            </tr>
        </table>
    </div>
    <div class="footer">
        <button class="btn btn-beizhu span3" type="button">备注</button>
        <button class="btn btn-submit span7" type="button">
            提交申购单
            <span class="text-66 font28">(已选中<i id="sel-num">0</i>/90)</span>
        </button>
    </div>
</div>
<div class="fast-tips">搜索不到该物料</div>
<script src="../js/zepto.min.js"></script>
<script src="../js/msgBox.js"></script>
<script>
    //数量发生变化时设置样式和选中数量
    $("input[type='number']").on('change', function () {
        var inputs = $(this).parents('tr').find("input[type='number']");
        var flag = false;
        inputs.each(function () {
            if ($(this).val() != '') {
                flag = true;
                return false;
            }
        });

        if (flag) {
            if (!$(this).parent().siblings('td:first-child').hasClass('full')) {
                $(this).parent().siblings('td:first-child').addClass('full');
                $('#sel-num').text(parseInt($('#sel-num').text()) + 1);
            }
        }
        else {
            $(this).parent().siblings('td:first-child').removeClass('full');
            $('#sel-num').text(parseInt($('#sel-num').text()) - 1);
        }
    });

    $('.btn-beizhu').on('click click', function () {
        $.msgbox({
            msgContent: '<textarea rows="8" placeholder="请输入" maxlength="50" id="txt-bz"></textarea><i class="count">0/50</i>',
            showTitle: true,
            title: '备注',
            buttons: ['取消', '保存'],
            cancel: function () {
            },
            submit: function () {
//                todo 保存跳转
            },
            close: false
        });
    });
    $('.btn-submit').on('click click', function () {
        $.msgbox({
            msgContent: '确认提交验货单',
            cancel: function () {
            },
            submit: function () {
//                todo 保存跳转
            },
            close: false
        });
    });
    $(document).on('keyup', '#txt-bz', function () {
        $(this).next().text((50 - $(this).val().length) + '/50');
    });

    //    20161027新增搜索功能
    $('.search-input').on('input click', function () {
        $('body').find('.mask').remove();
        var mask = $("<div class='mask' style='margin-top:8.6rem'></div>");
        $('body').append(mask);
        $('.search-content').show();
        $('.mask').removeClass('hidden');
    });
    $('.list-group li').on('click', function () {
        $('.search-content,.mask').hide();
        var _self = $(this);
        var flag = false;
        $('.danju tr').each(function () {
            if ($(this).find('.name').text() == $.trim(_self.html())) {
                $('.danju tr').removeClass('search-result');
                $(this).addClass('search-result');
                $(this).find('input')[0].focus();
                flag = true;
                return false;
            }
        })
//        debugger;
        if (!flag) {
            $('.danju tr').removeClass('search-result');
            $('.fast-tips').show();
            setTimeout(function () {
                $('.fast-tips').hide()
            }, 1000);
        }
    })
    $(document).on('click', '.mask', function () {
        $('.search-content,.mask').hide();
    });
    //    20161027新增搜索功能
</script>
</body>
</html>